import { defineComponent, PropType, provide, reactive } from "vue"

import { Schema, SchemaTypes } from "./types"

import SchemaItem from "./SchemaItem"
import { SchemaFormContextKey } from "./context"

export default defineComponent({
  props: {
    schema: {
      type: Object as PropType<Schema>,
      required: true
    },
    value: {
      required: true
    },
    onChange: {
      type: Function as PropType<(v: any) => void>,
      required: true
    }
  },
  name: "SchemaForm",
  setup(props, { slots, emit, attrs }) {
    const handleChange = (k: any) => {
      props.onChange(k)
    }
    // const context: any = reactive({
    //   SchemaItem
    // })
    const context: any = {
      SchemaItem
    }
    // let index = 100
    // setInterval(() => {
    //   context.SchemaItem = index++
    // }, 1000)
    provide(SchemaFormContextKey, context)
    return () => {
      const { schema, value } = props
      return (
        <SchemaItem
          schema={props.schema}
          rootSchema={schema}
          value={props.value}
          onChange={handleChange}
        />
      )
    }
  }
})
